<template>
<div class="app-container">
<div class="bg-dark text-white font-sans">

  <!-- 英雄区域 - 视频背景 -->
  <section id="hero" class="relative h-screen flex items-center justify-center overflow-hidden">
      <!-- 视频背景 -->
      <div class="absolute inset-0 z-0">
          <div class="absolute inset-0 bg-gradient-to-b from-darker/80 to-dark/90 z-10"></div>
          <!-- 视频占位图 -->
          <img src="https://picsum.photos/1920/1080?random=10" alt="视频背景" class="w-full h-full object-cover">
          <!-- 实际项目中可以替换为视频 -->
          <!-- <video autoplay muted loop class="w-full h-full object-cover">
              <source src="your-video.mp4" type="video/mp4">
          </video> -->
      </div>

      <!-- 内容 -->
      <div class="container mx-auto px-4 relative z-20 text-center">
          <div class="mb-8 text-4xl md:text-6xl font-bold text-shadow">
              狂速科技SAAS
              <div class="text-xl md:text-3xl font-light mt-2">智能小程序解决方案</div>
          </div>
          <p class="text-lg md:text-xl max-w-3xl mx-auto mb-10 text-gray-300">
              一次开发，多平台部署，助力企业快速搭建数字化业务平台，开启智能营销新时代
          </p>
          <div class="flex flex-col sm:flex-row justify-center gap-4">
              <a href="#pricing" class="bg-gradient-blue text-white py-3 px-8 rounded-full font-semibold hover-lift">
                  立即获取方案
              </a>
              <a href="#demo" class="border-2 border-primary text-primary py-3 px-8 rounded-full font-semibold hover:bg-primary/10 transition-colors">
                  预约演示 <i class="fa fa-arrow-right ml-2"></i>
              </a>
          </div>

          <!-- 滚动指示器 -->
          <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
              <a href="#solutions" class="text-white opacity-70 hover:opacity-100 transition-opacity">
                  <i class="fa fa-chevron-down text-2xl"></i>
              </a>
          </div>
      </div>
  </section>

  <!-- 解决方案 -->
  <section id="solutions" class="py-20 bg-darker">
      <div class="container mx-auto px-4">
          <div class="text-center mb-16">
              <h2 class="text-3xl md:text-4xl font-bold mb-4">为您提供全方位的<span class="text-primary">小程序解决方案</span></h2>
              <p class="text-gray-400 max-w-2xl mx-auto">针对不同行业需求，我们提供定制化的小程序解决方案，帮助企业快速实现数字化转型</p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <!-- 解决方案卡片1 -->
              <div class="bg-card rounded-xl p-8 hover-lift card-glow">
                  <div class="text-primary text-4xl mb-6">
                      <i class="fa fa-shopping-bag"></i>
                  </div>
                  <h3 class="text-2xl font-bold mb-4">电商解决方案</h3>
                  <p class="text-gray-400 mb-6">
                      打造高性能电商小程序，支持多种营销工具和支付方式，提供流畅购物体验
                  </p>
                  <ul class="space-y-2 mb-6 text-gray-400">
                      <li><i class="fa fa-check text-primary mr-2"></i> 全渠道订单管理</li>
                      <li><i class="fa fa-check text-primary mr-2"></i> 会员体系与营销</li>
                      <li><i class="fa fa-check text-primary mr-2"></i> 数据分析与报表</li>
                  </ul>
                  <a href="#" class="text-primary hover:text-primary/80 inline-flex items-center">
                      了解更多 <i class="fa fa-arrow-right ml-2"></i>
                  </a>
              </div>

              <!-- 解决方案卡片2 -->
              <div class="bg-card rounded-xl p-8 hover-lift card-glow">
                  <div class="text-primary text-4xl mb-6">
                      <i class="fa fa-users"></i>
                  </div>
                  <h3 class="text-2xl font-bold mb-4">服务预约解决方案</h3>
                  <p class="text-gray-400 mb-6">
                      提供便捷的在线预约系统，支持时间管理、客户提醒和服务评价，提升服务效率
                  </p>
                  <ul class="space-y-2 mb-6 text-gray-400">
                      <li><i class="fa fa-check text-primary mr-2"></i> 在线预约与排班</li>
                      <li><i class="fa fa-check text-primary mr-2"></i> 自动提醒与通知</li>
                      <li><i class="fa fa-check text-primary mr-2"></i> 服务评价与反馈</li>
                  </ul>
                  <a href="#" class="text-primary hover:text-primary/80 inline-flex items-center">
                      了解更多 <i class="fa fa-arrow-right ml-2"></i>
                  </a>
              </div>

              <!-- 解决方案卡片3 -->
              <div class="bg-card rounded-xl p-8 hover-lift card-glow">
                  <div class="text-primary text-4xl mb-6">
                      <i class="fa fa-graduation-cap"></i>
                  </div>
                  <h3 class="text-2xl font-bold mb-4">教育解决方案</h3>
                  <p class="text-gray-400 mb-6">
                      为教育机构提供在线教学平台，支持直播课程、录播课程、作业管理和学员管理
                  </p>
                  <ul class="space-y-2 mb-6 text-gray-400">
                      <li><i class="fa fa-check text-primary mr-2"></i> 多形式课程展示</li>
                      <li><i class="fa fa-check text-primary mr-2"></i> 学员学习跟踪</li>
                      <li><i class="fa fa-check text-primary mr-2"></i> 在线考试与测评</li>
                  </ul>
                  <a href="#" class="text-primary hover:text-primary/80 inline-flex items-center">
                      了解更多 <i class="fa fa-arrow-right ml-2"></i>
                  </a>
              </div>
          </div>
      </div>
  </section>

  <!-- 功能特性 -->
  <section id="features" class="py-20 bg-dark">
      <div class="container mx-auto px-4">
          <div class="text-center mb-16">
              <h2 class="text-3xl md:text-4xl font-bold mb-4">强大的<span class="text-primary">功能特性</span></h2>
              <p class="text-gray-400 max-w-2xl mx-auto">我们的SAAS小程序平台拥有丰富的功能，满足企业各种需求</p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <!-- 功能卡片1 -->
              <div class="bg-card rounded-xl p-8 hover-lift">
                  <div class="text-primary text-3xl mb-4">
                      <i class="fa fa-desktop"></i>
                  </div>
                  <h3 class="text-xl font-bold mb-3">全平台适配</h3>
                  <p class="text-gray-400">
                      支持微信、支付宝、抖音等多平台小程序，一次开发，多端部署，覆盖更广泛用户群体
                  </p>
              </div>

              <!-- 功能卡片2 -->
              <div class="bg-card rounded-xl p-8 hover-lift">
                  <div class="text-primary text-3xl mb-4">
                      <i class="fa fa-paint-brush"></i>
                  </div>
                  <h3 class="text-xl font-bold mb-3">可视化编辑器</h3>
                  <p class="text-gray-400">
                      拖放式组件库，无需代码基础，30分钟快速搭建专属小程序，轻松定制页面布局和风格
                  </p>
              </div>

              <!-- 功能卡片3 -->
              <div class="bg-card rounded-xl p-8 hover-lift">
                  <div class="text-primary text-3xl mb-4">
                      <i class="fa fa-shield"></i>
                  </div>
                  <h3 class="text-xl font-bold mb-3">数据安全保障</h3>
                  <p class="text-gray-400">
                      采用银行级加密技术，数据实时备份，多重安全防护机制，保障企业信息安全
                  </p>
              </div>

              <!-- 功能卡片4 -->
              <div class="bg-card rounded-xl p-8 hover-lift">
                  <div class="text-primary text-3xl mb-4">
                      <i class="fa fa-line-chart"></i>
                  </div>
                  <h3 class="text-xl font-bold mb-3">数据分析</h3>
                  <p class="text-gray-400">
                      提供全面的数据分析功能，实时监控用户行为和业务数据，助力企业精准决策
                  </p>
              </div>

              <!-- 功能卡片5 -->
              <div class="bg-card rounded-xl p-8 hover-lift">
                  <div class="text-primary text-3xl mb-4">
                      <i class="fa fa-bullhorn"></i>
                  </div>
                  <h3 class="text-xl font-bold mb-3">营销工具</h3>
                  <p class="text-gray-400">
                      丰富的营销插件和工具，支持拼团、秒杀、优惠券等多种营销活动，提升转化率
                  </p>
              </div>

              <!-- 功能卡片6 -->
              <div class="bg-card rounded-xl p-8 hover-lift">
                  <div class="text-primary text-3xl mb-4">
                      <i class="fa fa-cogs"></i>
                  </div>
                  <h3 class="text-xl font-bold mb-3">插件扩展</h3>
                  <p class="text-gray-400">
                      支持丰富的插件扩展，可根据业务需求灵活添加功能模块，满足个性化需求
                  </p>
              </div>
          </div>
      </div>
  </section>

  <!-- 套餐定价 -->
  <section id="pricing" class="py-20 bg-darker">
      <div class="container mx-auto px-4">
          <div class="text-center mb-16">
              <h2 class="text-3xl md:text-4xl font-bold mb-4">三大核心套餐，满足不同场景需求</h2>
              <p class="text-gray-400 max-w-2xl mx-auto">根据您的业务规模和需求，选择最适合的套餐方案</p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
              <!-- 基础版 -->
              <div class="bg-card rounded-xl overflow-hidden hover-lift">
                  <div class="p-8">
                      <h3 class="text-2xl font-bold mb-2">基础版</h3>
                      <div class="text-gray-400 mb-6">适合初创企业</div>
                      <div class="text-4xl font-bold mb-1">999<span class="text-sm font-normal text-gray-400">/年</span></div>

                      <ul class="space-y-3 mt-8">
                          <li class="flex items-start">
                              <i class="fa fa-check text-primary mt-1 mr-3"></i>
                              <span>单平台小程序（任选）</span>
                          </li>
                          <li class="flex items-start">
                              <i class="fa fa-check text-primary mt-1 mr-3"></i>
                              <span>基础商城功能</span>
                          </li>
                          <li class="flex items-start">
                              <i class="fa fa-check text-primary mt-1 mr-3"></i>
                              <span>5GB存储空间</span>
                          </li>
                          <li class="flex items-start">
                              <i class="fa fa-check text-primary mt-1 mr-3"></i>
                              <span>基础营销工具</span>
                          </li>
                          <li class="flex items-start text-gray-500">
                              <i class="fa fa-times mt-1 mr-3"></i>
                              <span>自定义域名</span>
                          </li>
                          <li class="flex items-start text-gray-500">
                              <i class="fa fa-times mt-1 mr-3"></i>
                              <span>专属技术支持</span>
                          </li>
                      </ul>
                  </div>
                  <div class="px-8 pb-8">
                      <a href="#contact" class="block w-full text-center py-3 border-2 border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors">
                          立即购买
                      </a>
                  </div>
              </div>

              <!-- 专业版 -->
              <div class="bg-card rounded-xl overflow-hidden hover-lift border-2 border-primary relative transform scale-105 z-10">
                  <div class="absolute top-0 right-0 bg-primary text-white px-4 py-1 text-sm font-medium">
                      推荐
                  </div>
                  <div class="p-8">
                      <h3 class="text-2xl font-bold mb-2">专业版</h3>
                      <div class="text-gray-400 mb-6">适合中小企业</div>
                      <div class="text-4xl font-bold mb-1">2999<span class="text-sm font-normal text-gray-400">/年</span></div>

                      <ul class="space-y-3 mt-8">
                          <li class="flex items-start">
                              <i class="fa fa-check text-primary mt-1 mr-3"></i>
                              <span>三平台小程序</span>
                          </li>
                          <li class="flex items-start">
                              <i class="fa fa-check text-primary mt-1 mr-3"></i>
                              <span>高级商城功能</span>
                          </li>
                          <li class="flex items-start">
                              <i class="fa fa-check text-primary mt-1 mr-3"></i>
                              <span>20GB存储空间</span>
                          </li>
                          <li class="flex items-start">
                              <i class="fa fa-check text-primary mt-1 mr-3"></i>
                              <span>高级营销工具</span>
                          </li>
                          <li class="flex items-start">
                              <i class="fa fa-check text-primary mt-1 mr-3"></i>
                              <span>自定义域名</span>
                          </li>
                          <li class="flex items-start text-gray-500">
                              <i class="fa fa-times mt-1 mr-3"></i>
                              <span>专属技术支持</span>
                          </li>
                      </ul>
                  </div>
                  <div class="px-8 pb-8">
                      <a href="#contact" class="block w-full text-center py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                          立即购买
                      </a>
                  </div>
              </div>

              <!-- 企业版 -->
              <div class="bg-card rounded-xl overflow-hidden hover-lift">
                  <div class="p-8">
                      <h3 class="text-2xl font-bold mb-2">企业版</h3>
                      <div class="text-gray-400 mb-6">适合大型企业</div>
                      <div class="text-4xl font-bold mb-1">4999<span class="text-sm font-normal text-gray-400">/年</span></div>

                      <ul class="space-y-3 mt-8">
                          <li class="flex items-start">
                              <i class="fa fa-check text-primary mt-1 mr-3"></i>
                              <span>全平台小程序</span>
                          </li>
                          <li class="flex items-start">
                              <i class="fa fa-check text-primary mt-1 mr-3"></i>
                              <span>企业级商城功能</span>
                          </li>
                          <li class="flex items-start">
                              <i class="fa fa-check text-primary mt-1 mr-3"></i>
                              <span>50GB存储空间</span>
                          </li>
                          <li class="flex items-start">
                              <i class="fa fa-check text-primary mt-1 mr-3"></i>
                              <span>全套营销工具</span>
                          </li>
                          <li class="flex items-start">
                              <i class="fa fa-check text-primary mt-1 mr-3"></i>
                              <span>自定义域名与配置</span>
                          </li>
                          <li class="flex items-start">
                              <i class="fa fa-check text-primary mt-1 mr-3"></i>
                              <span>专属技术支持</span>
                          </li>
                      </ul>
                  </div>
                  <div class="px-8 pb-8">
                      <a href="#contact" class="block w-full text-center py-3 border-2 border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors">
                          立即购买
                      </a>
                  </div>
              </div>
          </div>
      </div>
  </section>

  <!-- 关于我们 -->
  <section id="about" class="py-20 bg-dark">
      <div class="container mx-auto px-4">
          <div class="flex flex-col lg:flex-row items-center gap-12">
              <div class="lg:w-1/2">
                  <h2 class="text-3xl md:text-4xl font-bold mb-6">关于<span class="text-primary">狂速科技SAAS</span></h2>
                  <p class="text-gray-300 mb-6">
                      狂速科技SAAS成立于2020年，是国内领先的小程序SAAS服务提供商。我们致力于为企业提供简单、高效、安全的小程序解决方案，帮助企业快速实现数字化转型。
                  </p>
                  <p class="text-gray-300 mb-6">
                      我们的团队由经验丰富的技术专家和行业顾问组成，拥有多年的互联网产品开发和运营经验。我们坚持以客户为中心，不断创新和优化产品，为客户提供最优质的服务。
                  </p>

                  <div class="grid grid-cols-2 gap-6 mt-8">
                      <div>
                          <div class="text-4xl font-bold text-primary mb-2">500+</div>
                          <div class="text-gray-400">企业客户</div>
                      </div>
                      <div>
                          <div class="text-4xl font-bold text-primary mb-2">100万+</div>
                          <div class="text-gray-400">活跃用户</div>
                      </div>
                      <div>
                          <div class="text-4xl font-bold text-primary mb-2">99.9%</div>
                          <div class="text-gray-400">系统可用性</div>
                      </div>
                      <div>
                          <div class="text-4xl font-bold text-primary mb-2">24/7</div>
                          <div class="text-gray-400">技术支持</div>
                      </div>
                  </div>
              </div>

              <div class="lg:w-1/2">
                  <div class="relative">
                      <img src="https://picsum.photos/800/600?random=20" alt="关于我们" class="rounded-xl w-full h-auto">
                      <div class="absolute -bottom-6 -left-6 bg-primary text-white p-6 rounded-xl max-w-xs">
                          <div class="text-lg font-bold mb-2">我们的使命</div>
                          <p class="text-sm text-gray-200">
                              让每个企业都能拥有自己的智能小程序，降低数字化门槛，提升企业竞争力
                          </p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </section>

  <!-- 联系我们 -->
  <section id="contact" class="py-20 bg-darker">
      <div class="container mx-auto px-4">
          <div class="text-center mb-16">
              <h2 class="text-3xl md:text-4xl font-bold mb-4">联系<span class="text-primary">我们</span></h2>
              <p class="text-gray-400 max-w-2xl mx-auto">如有任何疑问或需求，请随时与我们联系，我们将竭诚为您服务</p>
          </div>

          <div class="flex flex-col lg:flex-row gap-12 max-w-5xl mx-auto">
              <div class="lg:w-1/2">
                  <form class="space-y-6">
                      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                          <div>
                              <label for="name" class="block text-sm font-medium text-gray-300 mb-2">姓名</label>
                              <input type="text" id="name" class="w-full px-4 py-3 bg-card border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
                          </div>
                          <div>
                              <label for="phone" class="block text-sm font-medium text-gray-300 mb-2">电话</label>
                              <input type="tel" id="phone" class="w-full px-4 py-3 bg-card border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
                          </div>
                      </div>

                      <div>
                          <label for="email" class="block text-sm font-medium text-gray-300 mb-2">邮箱</label>
                          <input type="email" id="email" class="w-full px-4 py-3 bg-card border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
                      </div>

                      <div>
                          <label for="message" class="block text-sm font-medium text-gray-300 mb-2">留言内容</label>
                          <textarea id="message" rows="5" class="w-full px-4 py-3 bg-card border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
                      </div>

                      <button type="submit" class="bg-primary hover:bg-primary/90 text-white py-3 px-8 rounded-lg transition-colors">
                          提交信息
                      </button>
                  </form>
              </div>

              <div class="lg:w-1/2">
                  <div class="bg-card p-8 rounded-xl h-full">
                      <h3 class="text-2xl font-bold mb-6">联系方式</h3>

                      <div class="space-y-6">
                          <div class="flex items-start">
                              <div class="text-primary text-xl mr-4 mt-1">
                                  <i class="fa fa-map-marker"></i>
                              </div>
                              <div>
                                  <div class="font-medium mb-1">公司地址</div>
                                  <p class="text-gray-400">上海市浦东新区张江高科技园区博云路2号</p>
                              </div>
                          </div>

                          <div class="flex items-start">
                              <div class="text-primary text-xl mr-4 mt-1">
                                  <i class="fa fa-phone"></i>
                              </div>
                              <div>
                                  <div class="font-medium mb-1">服务热线</div>
                                  <p class="text-gray-400">400-888-XXXX</p>
                              </div>
                          </div>

                          <div class="flex items-start">
                              <div class="text-primary text-xl mr-4 mt-1">
                                  <i class="fa fa-envelope"></i>
                              </div>
                              <div>
                                  <div class="font-medium mb-1">邮箱</div>
                                  <p class="text-gray-400">contact@yunchuangsaas.com</p>
                              </div>
                          </div>

                          <div class="flex items-start">
                              <div class="text-primary text-xl mr-4 mt-1">
                                  <i class="fa fa-clock-o"></i>
                              </div>
                              <div>
                                  <div class="font-medium mb-1">工作时间</div>
                                  <p class="text-gray-400">周一至周五: 9:00 - 18:00</p>
                              </div>
                          </div>
                      </div>

                      <div class="mt-8">
                          <div class="font-medium mb-3">关注我们</div>
                          <div class="flex space-x-4">
                              <a href="#" class="text-white hover:text-primary transition-colors text-xl">
                                  <i class="fa fa-weixin"></i>
                              </a>
                              <a href="#" class="text-white hover:text-primary transition-colors text-xl">
                                  <i class="fa fa-weibo"></i>
                              </a>
                              <a href="#" class="text-white hover:text-primary transition-colors text-xl">
                                  <i class="fa fa-qq"></i>
                              </a>
                              <a href="#" class="text-white hover:text-primary transition-colors text-xl">
                                  <i class="fa fa-linkedin"></i>
                              </a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </section>

</div>
</div>

</template>

<script>
// 原文件第10 - 25行的 Tailwind 配置
const tailwindConfig = {
  theme: {
    extend: {
      colors: {
        primary: '#48b6ff',
        secondary: '#2e6cf1',
        dark: '#080812',
        darker: '#04040a',
        card: '#1a1a31'
      },
      fontFamily: {
        sans: ['Segoe UI', 'sans-serif'],
      },
    }
  }
};

// 初始化 Tailwind 配置
if (typeof window !== 'undefined' && window.tailwind) {
  window.tailwind.config = tailwindConfig;
}

export default {
  name: 'IndexView',
  data() {
    return {
      isMobileMenuOpen: false,

    };
  },
    methods: {

    }
};
</script>

<style scoped lang="scss">

</style>
